<nz-content style="margin:0 16px;">
  <nz-breadcrumb style="margin:12px 0;">
    <div style="margin-bottom: 16px;">
    </div>
  </nz-breadcrumb>
  <div [ngGrid]="gridConfig">
    <div [(ngGridItem)]="boxes[0].config" (onItemChange)="updateItem(0, $event)"
         (onResize)="onResize(0, $event)" (onDrag)="onDrag(0, $event)">
      <nz-card style="width:100%;height: 100%">
        <ng-template #title>
          <div class="handle">水滴图</div>
        </ng-template>
        <ng-template #extra>
          <a title="删除" (click)="removeWidget(0);">
            <i class="anticon anticon-delete"></i>
          </a>
        </ng-template>
        <ng-template #body>
          <div echarts #liqud [options]="option" (chartInit)="onLiqudChartInit($event)"></div>
        </ng-template>
      </nz-card>
    </div>
    <div [(ngGridItem)]="boxes[1].config" (onItemChange)="updateItem(1, $event)"
         (onResize)="onResize(1, $event)" (onDrag)="onDrag(1, $event)">
      <nz-card style="width:100%;height: 100%">
        <ng-template #title>
          <div class="handle">折线图</div>
        </ng-template>
        <ng-template #extra>
          <a title="删除" (click)="removeWidget(1);">
            <i class="anticon anticon-delete"></i>
          </a>
        </ng-template>
        <ng-template #body>
          <div echarts  #chart [options]="chartOption" (chartInit)="onChartInit($event)"></div>
        </ng-template>
      </nz-card>
    </div>
  </div>

</nz-content>
